<template>
  <view class="step-wrapper flex flex-row ">
    <view class="step-item" v-for="(item, index) in stepList" :key="index" @click="stepClick(index + 1)">
      <view class="flex flex-row around item-center" :class="{ selected: step === index + 1 }">
        <view class="fs_0 num">{{ index + 1 }}</view>
        <view class="fs_0 title">{{ item }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "StepNav",
  props: {
    step: {
      default: 1,
      type: Number,
    },
    practiceType: {
      type: Number,
    }
  },
  data() {
    return {
      stepList: []
    }
  },
  created() {
    if (this.practiceType === 1) {
      this.stepList = ["创建练习", "配置试题", "练习设置"]
    }
    if (this.practiceType === 2) {
      this.stepList = ["创建练测", "配置试题", "练测设置"]
    }
    if (this.practiceType === 3) {
      this.stepList = ["创建竞赛", "配置试题", "竞赛设置"]
    }
    if (this.practiceType === 4) {
      this.stepList = ["创建答题", "配置试题", "答题设置"]
    }
  },
  methods: {
    stepClick(step) {
      this.$emit('change', step)
    }
  }
}
</script>
<style scoped lang="scss">
.step-wrapper {
  padding: 32rpx;
  background-color: #fff;
  border-bottom-left-radius: 24rpx;
  border-bottom-right-radius: 24rpx;

  .step-item {
    width: calc(100% / 3);

    .title {
      color: #666666;
    }

    .num {
      color: #37B874;
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background-color: #F5F5F5;
      border-radius: 50%;
    }

    .selected {
      .title {
        color: #333333;
      }

      .num {
        color: #FFFFFF;
        background-color: #37B874;
      }
    }
  }
}
</style>